<template>
    <el-dialog :model-value="props.isBatch" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="500">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">批量添加</h4>
                </div>
                <div class="flex items-center">
                    <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
                </div>
            </div>
        </template>
        <div>
            <div class="h-390px overflow-hidden">
                <el-input v-model="state.batchWords" :rows="18" type="textarea" @blur="handleBlur()" placeholder="请输入关键词，一行代表一个关键词" @keyup.enter.native="handleEnter()" />
            </div>
        </div>
        <div class="flex flex-center mt-16px">
            <el-button @click="emit('closeDialog')">取消</el-button>
            <el-button @click="handleConfirm" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">

const props = defineProps<{
    isBatch: boolean
}>()

const emit = defineEmits(['closeDialog', 'confirm'])

const state = reactive({
    batchWords: '',
    batchWordsArr: <string[]>[],
})

function closeDialog() {
    emit('closeDialog')
}

async function handleConfirm() {
    emit('confirm',state.batchWordsArr)
    emit('closeDialog')
    state.batchWords = ''
    state.batchWordsArr = []
}


function handleEnter() {
    state.batchWordsArr = state.batchWords.split('\n')
    state.batchWordsArr = state.batchWordsArr.filter(item => item !== "")   //去除空字符串
    state.batchWordsArr = [...new Set(state.batchWordsArr)]     //去重
}

function handleBlur(){
    handleEnter()
}


</script>

<style lang="scss" scoped></style>